<template>
  <div class="register-container">
    <h2>新用户注册</h2>
    <!-- 标签切换 -->
    <div class="content">
      <ul class="tabs">
        <li class="active">金融机构</li>
        <li>融资企业</li>
      </ul>
      <a-form :form="form" class="register-form" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }" @submit.prevent="handleSubmit">
        <a-form-item :required="true">
          <template #label>
            <div class="self-label" style="">
              <p>统一社会信用编码</p>
              <p>/营业执照注册号</p>
            </div>
          </template>
          <a-input v-decorator="['creditCode', {rules: [{required: true, message: '请输入统一社会信用编码/营业执照注册号'}]}]" placeholder="请输入"/>
        </a-form-item>
        <!-- 企业名称 -->
        <a-form-item label="企业名称" :required="true">
          <a-input v-decorator="['enterpriseName', {rules: [{required: true, message: '请输入企业名称'}]}]" placeholder="请输入"/>
        </a-form-item>
        <!-- 手机号码 -->
        <a-form-item label="手机号码" :required="true">
          <a-input
            addon-before="中国+86"
            v-decorator="['phone']"
            placeholder="请输入常用手机号码"
          />
        </a-form-item>
        <!-- 验证码 -->
        <a-form-item label="验证码" :required="true">
          <a-input
            v-decorator="['captcha']"
            placeholder="请输入验证码"
            style="width: 72%"
          />
          <a-button
            type="primary"
            :disabled="!canGetCaptcha"
            @click="handleGetCaptcha"
            style="float:right;position: relative;top:2px;"
          >
            {{ captchaText }}
          </a-button>
        </a-form-item>
        <!-- 账号名 -->
        <a-form-item label="账号名" :required="true">
          <a-input v-decorator="['account']" placeholder="请输入账号名"/>
        </a-form-item>
        <!-- 设置密码 -->
        <a-form-item label="设置密码" :required="true">
          <a-input
            type="password"
            v-decorator="['password']"
            placeholder="请输入密码"
          />
          <p style="color:#D9001B;margin:0;line-height: 1;">密码要求：8-20位，至少包含字母、数字、特殊符号（如！@#）</p>
        </a-form-item>
        <a-form-item label="确认密码" :required="true">
          <a-input
            type="password"
            v-decorator="['password']"
            placeholder="请输入密码"
          />
        </a-form-item>
        <!-- 协议勾选 -->
        <div class="center">
          <a-checkbox v-model="agreeProtocol">我已阅读并同意 <a href="javascript:;" @click="handleProtocol">《供应链金融服务平台用户协议》</a></a-checkbox>
        </div>
        <!-- 注册按钮 -->
        <div class="center">
          <a-button
            style="width: 160px;margin-top:30px;"
            shape="round"
            size="large"
            type="primary"
            html-type="submit"
            :disabled="!agreeProtocol">
            注册
          </a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    return {
      currentTab: 'financial', // 当前选中标签，financial-金融机构，enterprise-融资企业
      form: this.$form.createForm(this), // 表单创建
      canGetCaptcha: true, // 是否可点击获取验证码
      captchaText: '获取验证码', // 验证码按钮文字
      agreeProtocol: false, // 是否同意协议
      captchaCountdown: 60 // 验证码倒计时
    }
  },
  methods: {
    // 切换标签
    handleTabChange (value) {
      this.currentTab = value
    },
    // 提交表单
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 表单校验通过，可在此处调用接口完成注册等逻辑
          console.log('表单数据：', values)
          // 示例：调用注册接口
          // this.$axios.post('/api/register', values).then(res => { ... }).catch(err => { ... });
        }
      })
    },
    // 获取验证码
    handleGetCaptcha () {
      if (this.canGetCaptcha) {
        this.canGetCaptcha = false
        const timer = setInterval(() => {
          if (this.captchaCountdown <= 0) {
            clearInterval(timer)
            this.captchaText = '重新发送'
            this.captchaCountdown = 60
            this.canGetCaptcha = true
          } else {
            this.captchaText = `${this.captchaCountdown} 秒后重试`
            this.captchaCountdown--
          }
        }, 1000)
        // 在此处可调用接口真正发送验证码
        console.log('发送验证码逻辑...')
      }
    },
    // 查看协议（可完善跳转真实协议页面逻辑）
    handleProtocol () {
      // 可通过路由跳转到协议详情页，这里简单模拟
      alert('《供应链金融服务平台用户协议》内容...')
    }
  }
}
</script>

<style lang="scss" scoped >
.register-container {
  height: 100%;
  padding-top:4%;
  margin:0 auto;
  background: #f2f2f2;
  overflow-y: auto;
  h2{
    margin-left: 15%;
    font-size: 32px;
    line-height: 1;
    color:#919191;
    position: relative;
    padding-left:20px;
    margin-bottom:50px;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        border-left:10px solid #797979;

    }
  }
  .content{
    width: 840px;
    margin:0 auto;
    border:none;
    .tabs {
        width: 100%;
        display: flex;
        li{
            font-size:18px;
            line-height: 55px;
            text-align: center;
            color:#333;
            width: 50%;
            background: #fff;
            border: 1px solid #797979;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            &.active{
                background: #2d8cf0;
                color: #fff;
            }
        }
    }
    .register-form {
        width: 70%;
        margin:0 auto;
        margin-top: 30px;
        .center{
            text-align: center;
        }
        .self-label{
          display: inline-block;
          p{
            font-size:14px;
            color:#000;
            line-height: 18px;
            margin:0 2px 0 0;
          }
        }
    }
  }
}

</style>
